<template>
  <view class="address-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="page-title">收货地址</view>
        <view class="page-subtitle">管理您的收货地址信息</view>
      </view>
    </view>

    <view class="content-container">
      <!-- 地址列表 -->
      <view v-if="addressList.length > 0" class="address-list">
        <view 
          v-for="(item, index) in addressList" 
          :key="item.address_id"
          class="address-card"
          :class="{ 'selected': selectedId === item.address_id }"
          @click="selectAddress(item)">
          
          <!-- 默认标签 -->
          <view v-if="item.is_default" class="default-badge">
            <uni-icons type="star-filled" size="16" color="#fff"></uni-icons>
            <text>默认</text>
          </view>
          
          <!-- 地址主体内容 -->
          <view class="address-main">
            <!-- 联系信息 -->
            <view class="contact-section">
              <view class="contact-info">
                <text class="contact-name">{{ item.receiver_name }}</text>
                <text class="contact-phone">{{ item.receiver_phone }}</text>
              </view>
              <view class="contact-tags">
                <text class="tag" v-if="item.gender === 'male'">先生</text>
                <text class="tag" v-if="item.gender === 'female'">女士</text>
                <text class="tag home-tag" v-if="item.address_tag === 'home'">家</text>
                <text class="tag company-tag" v-if="item.address_tag === 'company'">公司</text>
                <text class="tag school-tag" v-if="item.address_tag === 'school'">学校</text>
              </view>
            </view>
            
            <!-- 地址信息 -->
            <view class="address-section">
              <view class="location-info">
                <uni-icons type="location" size="16" color="#7f8c8d"></uni-icons>
                <text class="address-text">
                  {{ item.province }}{{ item.city }}{{ item.district }}
                </text>
                <text class="detail-address">{{ item.detail_address }}</text>
              </view>
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <view class="address-actions">
            <view class="action-button edit-btn" @click.stop="editAddress(item)">
              <uni-icons type="compose" size="18" color="#667eea"></uni-icons>
            </view>
            <view class="action-button delete-btn" @click.stop="confirmDelete(item)">
              <uni-icons type="trash" size="18" color="#e74c3c"></uni-icons>
            </view>
          </view>
          
          <!-- 选中指示器 -->
          <view v-if="fromOrder" class="select-indicator" :class="{ active: selectedId === item.address_id }">
            <view class="check-circle">
              <uni-icons v-if="selectedId === item.address_id" type="checkmarkempty" size="16" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">
          <uni-icons type="home" size="80" color="#bdc3c7"></uni-icons>
        </view>
        <view class="empty-content">
          <text class="empty-title">暂无收货地址</text>
          <text class="empty-desc">添加收货地址，让购物更便捷</text>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="bottom-section">
      <view class="add-button" @click="addAddress">
        <uni-icons type="plus" size="20" color="#fff"></uni-icons>
        <text class="add-text">新增收货地址</text>
      </view>
      
      <view v-if="fromOrder && selectedId" class="confirm-button" @click="confirmSelect">
        <text class="confirm-text">确认选择</text>
        <uni-icons type="right" size="16" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 删除确认弹窗 -->
    <view v-if="showDeleteModal" class="modal-overlay" @click="showDeleteModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">确认删除</text>
        </view>
        <view class="modal-body">
          <text class="modal-text">确定要删除这个收货地址吗？</text>
          <text class="modal-subtext">删除后无法恢复</text>
        </view>
        <view class="modal-actions">
          <view class="modal-button cancel-btn" @click="showDeleteModal = false">
            <text>取消</text>
          </view>
          <view class="modal-button confirm-btn" @click="deleteAddress">
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAddressList } from '@/api/user/address'

export default {
  data() {
    return {
      addressList: [],
      selectedId: '',
      fromOrder: false,
      showDeleteModal: false,
      deleteItem: null
    }
  },
  
  onLoad(options) {
    this.fromOrder = options.from === 'order' || options.from === 'checkout'
    this.loadAddressList()
  },
  
  onShow() {
    this.loadAddressList()
  },
  
  methods: {
    async loadAddressList() {
     
      try {
        uni.showLoading({ title: '加载中...' })
        
        const res = await getAddressList()
        this.addressList =  res.data.addresses
        
        // 如果是从订单页面跳转来的，设置默认选中
        if (this.fromOrder && this.addressList.length > 0) {
          const defaultAddress = this.addressList.find(item => item.is_default)
          this.selectedId = defaultAddress ? defaultAddress.address_id : this.addressList[0].address_id
        }
        
      } catch (error) {
        uni.showToast({
          title: '加载地址列表失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    selectAddress(item) {
      if (this.fromOrder) {
        this.selectedId = item.address_id
      }
    },
    
    addAddress() {
      uni.navigateTo({
        url: '/pages/address/edit'
      })
    },
    
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/address/edit?id=${item.address_id}`
      })
    },
    
    confirmDelete(item) {
      this.deleteItem = item
      this.showDeleteModal = true
    },
    
    async deleteAddress() {
      if (!this.deleteItem) {
        this.showDeleteModal = false
        return
      }
      
      try {
        uni.showLoading({ title: '删除中...' })
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 从列表中移除
        const index = this.addressList.findIndex(item => item.id === this.deleteItem.id)
        if (index > -1) {
          this.addressList.splice(index, 1)
        }
        
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        
      } catch (error) {
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
        this.showDeleteModal = false
        this.deleteItem = null
      }
    },
    
    confirmSelect() {
      const selectedAddress = this.addressList.find(item => item.address_id === this.selectedId)
      if (selectedAddress) {
        const formattedAddress = {
          id: selectedAddress.address_id,
          name: selectedAddress.name,
          phone: selectedAddress.phone,
          address: `${selectedAddress.province}${selectedAddress.city}${selectedAddress.district}${selectedAddress.detail}`,
          isDefault: selectedAddress.is_default,
          province: selectedAddress.province,
          city: selectedAddress.city,
          district: selectedAddress.district,
          detail: selectedAddress.detail
        }
        
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        
        if (prevPage) {
          if (prevPage.updateSelectedAddress) {
            prevPage.updateSelectedAddress(formattedAddress)
          }
          uni.$emit('addressSelected', formattedAddress)
        }
        
        uni.setStorageSync('selectedAddress', formattedAddress)
        
        uni.navigateBack()
      }
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.address-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 160rpx;
}

/* 页面头部 */
.page-header {
  position: relative;
  height: 200rpx;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 60rpx 40rpx 40rpx;
  color: #fff;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 内容容器 */
.content-container {
  padding: 20rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
}

/* 地址列表 */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 地址卡片 */
.address-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.3s ease;
}

.address-card.selected {
  border: 2rpx solid #667eea;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
}

.address-card:active {
  transform: translateY(2rpx);
}

/* 默认标签 */
.default-badge {
  position: absolute;
  top: -8rpx;
  right: 24rpx;
  background: linear-gradient(135deg, #ffd89b, #19547b);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  gap: 6rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

/* 地址主体 */
.address-main {
  margin-bottom: 20rpx;
}

/* 联系信息区域 */
.contact-section {
  margin-bottom: 20rpx;
}

.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.contact-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-right: 24rpx;
}

.contact-phone {
  font-size: 28rpx;
  color: #7f8c8d;
}

.contact-tags {
  display: flex;
  gap: 12rpx;
}

.tag {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  background: #f8f9fa;
  color: #6c757d;
}

.home-tag {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
}

.company-tag {
  background: rgba(230, 126, 34, 0.1);
  color: #e67e22;
}

.school-tag {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}

/* 地址信息区域 */
.address-section {
  padding-left: 8rpx;
}

.location-info {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
}

.address-text {
  display: block;
  margin-bottom: 8rpx;
}

.detail-address {
  display: block;
  margin-left: 24rpx; /* 保持与图标对齐 */
  color: #666;
}

/* 操作按钮 */
.address-actions {
  display: flex;
  gap: 16rpx;
  position: absolute;
  bottom: 32rpx;
  right: 32rpx;
}

.action-button {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.edit-btn {
  background: rgba(102, 126, 234, 0.1);
}

.edit-btn:active {
  background: rgba(102, 126, 234, 0.2);
  transform: scale(0.95);
}

.delete-btn {
  background: rgba(231, 76, 60, 0.1);
}

.delete-btn:active {
  background: rgba(231, 76, 60, 0.2);
  transform: scale(0.95);
}

/* 选中指示器 */
.select-indicator {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}

.check-circle {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.select-indicator.active .check-circle {
  background: #667eea;
  border-color: #667eea;
}

/* 空状态 */
.empty-state {
  background: #fff;
  border-radius: 24rpx;
  padding: 120rpx 40rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.empty-icon {
  margin-bottom: 40rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #2c3e50;
  margin-bottom: 16rpx;
  display: block;
}

.empty-desc {
  font-size: 26rpx;
  color: #95a5a6;
  display: block;
}

/* 底部操作区 */
.bottom-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx;
  border-top: 1rpx solid #e9ecef;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  gap: 16rpx;
}

.add-button {
  flex: 1;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
}

.add-button:active {
  transform: scale(0.98);
}

.add-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

.confirm-button {
  flex: 1;
  height: 88rpx;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
}

.confirm-button:active {
  transform: scale(0.98);
}

.confirm-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

/* 删除确认弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: #fff;
  border-radius: 24rpx;
  margin: 40rpx;
  overflow: hidden;
  min-width: 500rpx;
}

.modal-header {
  padding: 40rpx 32rpx 20rpx;
  text-align: center;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

.modal-body {
  padding: 0 32rpx 40rpx;
  text-align: center;
}

.modal-text {
  font-size: 28rpx;
  color: #7f8c8d;
  margin-bottom: 12rpx;
  display: block;
}

.modal-subtext {
  font-size: 24rpx;
  color: #bdc3c7;
  display: block;
}

.modal-actions {
  display: flex;
  border-top: 1rpx solid #f5f7fa;
}

.modal-button {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  transition: all 0.3s ease;
}

.cancel-btn {
  color: #7f8c8d;
  border-right: 1rpx solid #f5f7fa;
}

.cancel-btn:active {
  background: #f8f9fa;
}

.confirm-btn {
  color: #e74c3c;
  font-weight: bold;
}

.confirm-btn:active {
  background: rgba(231, 76, 60, 0.1);
}
</style>    